<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/blog.css">
    <title>Blog示例</title>
</head>

<body>
    <!-- 左侧侧边栏 开始 -->
    <div class="side-bar">
        <div class="header">
            <a href="#" class="logo">
                <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt="">
            </a>
            <div class="author-name">我的Blog</div>
            <div class="info">这个人很懒，什么都没有留下。</div>
        </div>
        <div class="nav">
            <a href="">关于我</a>
            <a href="">微博</a>
            <a href="">公众号</a>
        </div>
        <div class="tag-list">
            <a href="">#JavaScript</a>
            <a href="">#Python</a>
            <a href="">#Golang</a>
        </div>
    </div>
    <!-- 左侧侧边栏 结束 -->

    <!-- 主内容区 开始 -->
    <div class="main">
        <div class="article-list">
            <div class="article">
                <div class="article-header">
                    <h1>海燕</h1>
                    <span class="article-date">2018-02-28</span>
                </div>
                <div class="content">
                    在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。
                </div>
                <div class="article-tag">
                    <a href=""># HTML</a>
                    <a href=""># CSS</a>
                </div>
            </div>
            <div class="article">
                <div class="article-header">
                    <a class="article-title">海燕</a>
                    <span class="article-date">2018-02-28</span>
                </div>
                <div class="content">
                    在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。
                </div>
                <div class="article-tag">
                    <a href=""># HTML</a>
                    <a href=""># CSS</a>
                </div>
            </div>
            <div class="article">
                <div class="article-header">
                    <a class="article-title">海燕</a>
                    <span class="article-date">2018-02-28</span>
                </div>
                <div class="content">
                    在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。
                </div>
                <div class="article-tag">
                    <a href=""># HTML</a>
                    <a href=""># CSS</a>
                </div>
            </div>
            <div class="article">
                <div class="article-header">
                    <a class="article-title">海燕</a>
                    <span class="article-date">2018-02-28</span>
                </div>
                <div class="content">
                    在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。
                </div>
                <div class="article-tag">
                    <a href=""># HTML</a>
                    <a href=""># CSS</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 主内容区 结束 -->

</body>

</html>